<template>
  <!-- 初始化echarts需要一个有宽高的盒子 -->
  <div id="chinabar"></div>
</template>

<script>
import jsonp from 'jsonp'
import options from './options'
export default {
  name: 'BarChina',
  mounted(){
    this.getData()
    this.mychart = this.$echarts.init(document.getElementById('chinabar'));
    this.mychart.setOption(options.option_bar)
    this.resizeTheChart()
     window.addEventListener("resize", this.resizeTheChart);
  },
  methods:{
     resizeTheChart() {
      if (this.$refs && this.$refs.mapbox) {
        let mychartNode = document.getElementById('mychart');
        mychartNode.style.height = mychartNode.offsetWidth*0.8+'px'
        this.mychart.resize();
      }
    },
    // 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
    getData(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
        if(!err){
            let list = data.data.list.map(item=>({name:item.name,value:item.value,deathNum:item.deathNum,cureNum:item.cureNum,asymptomNum:item.asymptomNum,econNum:item.econNum,obj: item}))
            console.log(data.data.list.map(item=>({obj: item})))
          //econNum现存确诊、asymptomNum现存无症状
          for(var i=0;i<34;i++)
          {
            options.option_bar.series[0].data.push(parseInt(list[i].econNum));
            options.option_bar.series[1].data.push(parseInt(list[i].value));
            options.option_bar.series[2].data.push(parseInt(list[i].asymptomNum));
            options.option_bar.series[3].data.push(parseInt(list[i].deathNum));
            options.option_bar.series[4].data.push(parseInt(list[i].cureNum));
            options.option_bar.xAxis[0].data.push(list[i].name)
          }
          this.mychart.setOption(options.option_bar)
        }
      })

      console.log('sadad')
    }
  }
}
</script>

<style scoped>
#chinabar{
  width: 100%;
  height:100%;
  background: transparent;
}
</style>